<template>
    <footer class="footer">
        <span class="todo-count"> 有<strong>{{ undo }}</strong>项未完成 </span>
        <ul class="filters">
            <li v-for="f in filterList"><a href="#/all" class="selected" 
            @click="$emit('update:filter', f.value)">{{ f.label
            }}</a></li>
        </ul>
        <button class="clear-completed" style="">清除已完成</button>
    </footer>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref } from 'vue'
const props = defineProps(["undo", "filter"]);
const emits = defineEmits(["update:filter"])
const filterList = ref([
    { label: '全部', value: '' },
    { label: '未完成', value: false },
    { label: '已完成', value: true },

]);
</script>